<template>
  <div v-if="permissionsLists(22)">
    <page-header :title="$t('m.Shop_details')">
      <el-button
        type="primary"
        @click="
          $router.push({
            path: '/vender/shop/create',
            query: { id: $route.query.id, type: userType == 1 ? 1 : '' }
          })
        "
        v-if="permissionsLists(20)"
      >
        {{ $t('m.branch_Edit') }}
      </el-button>
    </page-header>
    <div class="detail_div container">
      <div class="detail_left">
        <div class="detail_left_div">
          <div class="detail_title">
            <div style=" display: flex;align-items: center;">
              <span style="font-size: 16px;">{{
                $t('m.branch_Merchant_Information')
              }}</span>
              <div
                class="detail_state"
                :style="details.state | valFormat(stateOption1, 1)"
              >
                <span
                  class="detail_state_dot"
                  :style="details.state | valFormat(stateOption2, 1)"
                ></span>
                <span class="detail_state_text">{{
                  details.state | valFormat(stateOption1)
                }}</span>
              </div>
            </div>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Shop_Created_shop_logo') }}</span>
          </div>
          <div class="detail_text">
            <el-image
              v-if="details.logo"
              :src="fileUrlFormat(details.logo)"
              :preview-src-list="[fileUrlFormat(details.logo)]"
              alt=""
              class="logo_img"
              fit="cover"
            ></el-image>
            <span v-else>--</span>
          </div>
          <div class="detail_text" v-if="details.images.length > 0">
            <span>{{ $t('m.Shop_Created_shop_images') }}</span>
          </div>
          <div class="detail_text" v-if="details.images.length > 0">
            <div>
              <el-image
                v-for="(item, index) in details.images"
                :key="index"
                :src="fileUrlFormat(item)"
                :preview-src-list="[fileUrlFormat(item)]"
                class="shop_img"
                fit="cover"
              ></el-image>
            </div>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Shop_name') }}: </span>
            <span class="detail_text2">{{
              details.branchName | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Merchant_type') }}: </span>
            <span class="detail_text2">{{
              details.industryName
                ? details.industryName
                : '' | langFormat($cache.getLang())
            }}</span>
            <span class="detail_text2" v-show="details.description"
              >({{
                details.description
                  ? details.description
                  : '' | langFormat($cache.getLang())
              }})</span
            >
          </div>
          <div class="detail_text">
            <span>{{ $t('m.branch_Creationdate') }}: </span>
            <span class="detail_text2">{{
              details.createTime | dateformat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Shop_Details_Address') }}: </span>
            <span class="detail_text2">{{ details.address | strFormat }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Location_pin') }}: </span>
            <span class="detail_text2">{{
              details.addressMap | strFormat
            }}</span>
          </div>
        </div>
        <div class="detail_left_div">
          <div class="detail_title">{{ $t('m.Contact_person_msg') }}</div>
          <div class="detail_text">
            <span>{{ $t('m.Contact_person') }}: </span>
            <span class="detail_text2">{{
              details.principal | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Shop_Details_Contact') }}: </span>
            <span class="detail_text2">{{
              details.phone | phoneFormat(details.code) | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Merchant_owner_account') }}: </span>
            <span
              class="detail_text2"
              v-if="details.branchAccount && details.branchAccount.phone"
              >{{
                details.branchAccount.phone
                  | phoneFormat(details.branchAccount.code)
              }}</span
            >
            <span v-else>
              {{
                details.branchAccount && details.branchAccount.email
                  ? details.branchAccount.email
                  : '--'
              }}
            </span>
          </div>
        </div>
      </div>

      <div class="detail_right">
        <div class="detail_left_div">
          <div class="detail_title">
            {{ $t('m.Shop_revenue') }}
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Shop_Number_Orders') }}: </span>
            <span class="detail_text2">{{
              details.orderNumber | numberFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.orderRevenue') }}: </span>
            <span class="detail_text2">{{
              details.revenueAmount | amountFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Agency_Gross_volume') }}: </span>
            <span class="detail_text2">{{
              details.totalAmount | amountFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Shop_Payable_Available') }}: </span>
            <span class="detail_text2">{{
              details.pendingAmount | amountFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Agency_Details_Payouts') }}: </span>
            <span class="detail_text2">{{
              details.settledAmount | amountFormat
            }}</span>
          </div>
        </div>
        <div class="detail_left_div">
          <div class="detail_title">{{ $t('m.Billing_information') }}</div>
          <div class="detail_text">
            <span>{{ $t('m.Franchisee_belong') }}: </span>
            <span class="detail_text2">{{
              details.agentName ? details.agentName :  $t('m.Platform')  | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Shop_Details_Profit_allocation') }}: </span>
            <span class="detail_text2"
              >{{ details.branchRatio
              }}{{ details.branchRatio ? '%' : '' }}</span
            >
          </div>
          <div class="detail_text">
            <div>
              {{ $t('m.settingPricePlan') }}:
              <span class="detail_text2" v-if="details.billingDTO">
                <span v-show="details.billingDTO.freeDuration">{{
                  $t('m.billingRules1')
                    .replace(
                      '$order',
                      details.billingDTO.freeDurationApplyOrderNum == '' ||
                        details.billingDTO.freeDurationApplyOrderNum == null
                        ? $t('m.Every_order').toLowerCase()
                        : $t(
                            'm.' +
                              `First_order${details.billingDTO.freeDurationApplyOrderNum}`
                          ).toLowerCase()
                    )
                    .replace('$freeDuration', details.billingDTO.freeDuration)
                    .replace(
                      '$times1',
                      details.billingDTO.freeDurationControlType == 1
                        ? details.billingDTO.freeDuration > 1
                          ? $t('m.minute3')
                          : $t('m.minute2')
                        : details.billingDTO.freeDurationControlType == 2
                        ? details.billingDTO.freeDuration > 1
                          ? $t('m.hour4')
                          : $t('m.hour3')
                        : details.billingDTO.freeDuration > 1
                        ? $t('m.days')
                        : $t('m.day')
                    )
                }}</span>
                <span>{{
                  $t('m.billingRules2')
                    .replace(
                      '$thereafter',
                      details.billingDTO.freeDuration ? $t('m.thereafter') : ''
                    )
                    .replace('$currency', '')
                    .replace(
                      '$amount',
                      $format.amountFormat(details.billingDTO.amount)
                    )
                    .replace(
                      '$cycle',
                      $format.numberFormat(details.billingDTO.cycle)
                    )
                    .replace(
                      '$times2',
                      details.billingDTO.controlType == 1
                        ? details.billingDTO.cycle > 1
                          ? $t('m.minute3')
                          : $t('m.minute2')
                        : details.billingDTO.controlType == 2
                        ? details.billingDTO.cycle > 1
                          ? $t('m.hour4')
                          : $t('m.hour3')
                        : details.billingDTO.cycle > 1
                        ? $t('m.days')
                        : $t('m.day')
                    )
                    .replace(
                      '$punctuation',
                      details.billingDTO.dayAmount
                        ? $t('m.punctuation1')
                        : $t('m.punctuation2')
                    )
                }}</span>
                <span v-show="details.billingDTO.dayAmount">{{
                  $t('m.billingRules3')
                    .replace('$currency', '')
                    .replace(
                      '$dayAmount',
                      $format.amountFormat(details.billingDTO.dayAmount)
                    )
                }}</span>
                <span v-show="details.billingDTO.amount">{{
                  $t('m.billingRules4')
                    .replace('$currency', '')
                    .replace(
                      '$penaltyAmount',
                      $format.amountFormat($cache.get('xt')['penalty-amount'])
                    )
                    .replace(
                      '$maxRentDuration',
                      $format.numberFormat(details.billingDTO.maxRentDuration)
                    )
                    .replace(
                      '$times3',
                      details.billingDTO.maxDurationControlType == 1
                        ? details.billingDTO.maxRentDuration > 1
                          ? $t('m.minute3')
                          : $t('m.minute2')
                        : details.billingDTO.maxDurationControlType == 2
                        ? details.billingDTO.maxRentDuration > 1
                          ? $t('m.hour4')
                          : $t('m.hour3')
                        : details.billingDTO.maxRentDuration > 1
                        ? $t('m.days')
                        : $t('m.day')
                    )
                }}</span>
              </span>
              <span v-else>--</span>
            </div>
          </div>
        </div>
        <div class="detail_left_div">
          <div class="detail_title">{{ $t('m.branch_Operation_hours') }}</div>
          <div class="detail_text" v-for="(item, index) in times" :key="index">
            <span>{{ item.value | stateFormat(timesOptions) }}: </span>
            <span class="detail_text2" v-if="item.allDay">
              {{ '24 ' + $t('m.hour4') }}</span
            >
            <span
              class="detail_text2"
              v-else-if="
                item.check &&
                  (item.rangeTime1[0] ||
                    item.rangeTime2[0] ||
                    item.rangeTime3[0] ||
                    item.rangeTime4[0])
              "
              >{{
                item.rangeTime1.length > 0
                  ? item.rangeTime1[0] + '-' + item.rangeTime1[1]
                  : ''
              }}
              {{
                item.rangeTime2.length > 0
                  ? item.rangeTime2[0] + '-' + item.rangeTime2[1]
                  : ''
              }}
              {{
                item.rangeTime3.length > 0
                  ? item.rangeTime3[0] + '-' + item.rangeTime3[1]
                  : ''
              }}
              {{
                item.rangeTime4.length > 0
                  ? item.rangeTime4[0] + '-' + item.rangeTime4[1]
                  : ''
              }}
            </span>
            <span v-else>--</span>
          </div>
        </div>
      </div>
    </div>
    <div class="container" style="margin-top:0;">
      <div class="box_index">
        <div class="el_table_div" style="padding-bottom:0;">
          <el-tabs v-model="activeName" @tab-click="switchTab">
            <el-tab-pane
              :label="item.label"
              :name="item.value"
              v-for="item in optionsTab"
              :key="item.value"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div class="detail_left_div" style="padding-bottom:20px">
          <!-- 租借订单 -->
          <div
            class="el_table_div"
            style="padding: 0 20px;"
            v-if="activeName == '1'"
          >
            <el-table :data="orderPage.records" key="1">
              <el-table-column
                :label="$t('m.Order_List_OrderID')"
                min-width="140"
                prop="orderNo"
              >
                <!-- <template slot-scope="scope">
                  <div
                    class="jump_line"
                    @click="detailClick(scope.row.orderNo)"
                  >
                    {{ scope.row.orderNo }}
                  </div>
                </template> -->
              </el-table-column>
              <el-table-column
                prop="orderTime"
                :label="$t('m.Order_date')"
                width="180"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.createTime | dateformat }} ~
                    {{ scope.row.endTime | dateformat }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="orderAmount"
                :label="$t('m.Order_amount')"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.orderAmount | amountFormat }}
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column
                prop="depositAmount"
                :label="$t('m.Users_Deapoit')"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.depositAmount | amountFormat }}
                  </div>
                </template>
              </el-table-column> -->              
              <el-table-column
                prop="realAmount"
                :label="$t('m.Actual_amount_paid')"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.realAmount | amountFormat }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="paymentState"
                :label="$t('m.Order_List_PaymentStatus')"
                min-width="120"
              >
                <template slot-scope="scope">
                  <div>
                    {{
                      scope.row.paymentState
                        | stateFormat(payOption)
                        | strFormat
                    }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="state"
                :label="$t('m.Order_List_OrderStatus')"
                min-width="120"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.state | stateFormat(statesOption) }}
                  </div>
                </template>
              </el-table-column>
              <emptydata
                slot="empty"
                v-if="!orderPage.records || orderPage.records.length == 0"
              />
            </el-table>
            <el-pagination
              background
              :page-sizes="[10, 20, 30, 40, 50]"
              :page-size="orderPage.size"
              :current-page.sync="orderPage.current"
              layout="prev, pager, next"
              :pager-count="5"
              :total="orderPage.total"
              style="margin-right:-5px;"
              class="el_pagination"
              @current-change="changePageNumo"
              v-show="orderPage.total > 0"
            >
            </el-pagination>
          </div>
          <!-- 机柜管理 -->
          <div
            class="el_table_div"
            style="padding: 0 20px;"
            v-if="activeName == '2'"
          >
            <el-table :data="stationPage.records" key="2">
              <el-table-column
                :label="$t('m.Station_SN')"
                min-width="140"
                fixed
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.cabinetNo }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="imei" label="IMEI" min-width="100">
              </el-table-column>
              <el-table-column
                prop="deviceCount"
                :label="$t('m.workOrderTotalSlots')"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                :label="$t('m.Station_List_Available_to_rent_return')"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.available }} / {{ scope.row.canReturn }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="abnormalCount"
                :label="$t('m.Station_Exceptional')"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="damaged"
                :label="$t('m.Station_List_Reported_faulty')"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="isScreen"
                :label="$t('m.invite_Type')"
                min-width="120"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.isScreen | stateFormat(options2) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="state"
                :label="$t('m.Station_Status')"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.state | stateFormat(stationState) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                :label="$t('m.Users_Details_Operation')"
                min-width="104"
                v-if="isArrayEqual([34, 35, 36, 176], permissionsLists)"
              >
                <template slot-scope="scope">
                  <el-dropdown placement="bottom">
                    <img
                      src="@/assets/imgs/ic_operation.svg"
                      alt=""
                      class="dropdown_img"
                    />
                    <el-dropdown-menu
                      slot="dropdown"
                      style="white-space: nowrap !important;"
                    >
                      <el-dropdown-item
                        @click.native="stationClick(scope.row.cabinetNo)"
                        v-if="permissionsLists(34)"
                        >{{ $t('m.Details') }}</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click.native="dialogClick(4, scope.row.cabinetNo)"
                        v-if="
                          (scope.row.state == 1 || scope.row.state == 3) &&
                            permissionsLists(176)
                        "
                        >{{ $t('m.Station_refreshBattery') }}</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click.native="dialogClick(3, scope.row.cabinetNo)"
                        v-if="
                          (scope.row.state == 1 || scope.row.state == 3) &&
                            permissionsLists(36)
                        "
                        >{{ $t('m.Station_eject') }}</el-dropdown-item
                      >
                      <el-dropdown-item
                        v-if="permissionsLists(35)"
                        @click.native="
                          dialogClick(
                            scope.row.customizeState == 1 ? 1 : 2,
                            scope.row.cabinetNo
                          )
                        "
                        >{{
                          scope.row.customizeState == 1
                            ? $t('m.Station_LockStatus_Lock')
                            : $t('m.Station_List_Unlock')
                        }}</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
              <emptydata
                slot="empty"
                v-if="!stationPage.records || stationPage.records.length == 0"
              />
            </el-table>
            <el-pagination
              background
              :page-sizes="[10, 20, 30, 40, 50]"
              :page-size="stationPage.size"
              :current-page.sync="stationPage.current"
              layout=" prev, pager, next"
              :pager-count="5"
              :total="stationPage.total"
              style="margin-right:-5px;"
              class="el_pagination"
              @current-change="changePageNums"
              v-show="stationPage.total > 0"
            >
            </el-pagination>
          </div>
          <!-- 分成记录 -->
          <div
            class="el_table_div"
            style="padding: 0px 20px;"
            v-if="activeName == '3'"
          >
            <el-table :data="recordPage.records" key="3">
              <el-table-column
                :label="$t('m.Order_List_OrderID')"
                min-width="140"
                prop="orderNo"
              >
                <!-- <template slot-scope="scope">
                  <div
                    class="jump_line"
                    @click="detailClick(scope.row.orderNo)"
                  >
                    {{ scope.row.orderNo }}
                  </div>
                </template> -->
              </el-table-column>
              <el-table-column
                prop="totalAmount"
                :label="$t('m.Order_amount')"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.totalAmount | amountFormat }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.Shop_Details_Profit_allocation')"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.ratio }}{{ scope.row.ratio ? '%' : '' }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="amount"
                :label="$t('m.Agency_Details_Gross_volume')"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.amount | amountFormat }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.Profit_date')" min-width="100">
                <template slot-scope="scope">
                  <div>{{ scope.row.createTime | dateformat }}</div>
                </template>
              </el-table-column>
              <emptydata
                slot="empty"
                v-if="!recordPage.records || recordPage.records.length == 0"
              />
            </el-table>
            <el-pagination
              background
              :page-sizes="[10, 20, 30, 40, 50]"
              :page-size="recordPage.size"
              :current-page.sync="recordPage.current"
              layout=" prev, pager, next"
              :pager-count="5"
              :total="recordPage.total"
              style="margin-right:-5px;"
              class="el_pagination"
              @current-change="changePageNumr"
              v-show="recordPage.total > 0"
            >
            </el-pagination>
          </div>
          <!-- 提现 -->
          <div
            class="el_table_div"
            style="padding: 0px 20px;"
            v-if="activeName == '4'"
          >
            <el-table :data="withdrawPage.records" key="4">
              <el-table-column
                prop="orderNo"
                :label="$t('m.serialNumber')"
                min-width="140"
              >
              </el-table-column>
              <el-table-column
                prop="amount"
                :label="$t('m.applyWithdrawalAmounts')"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.amount | amountFormat }}
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column
                prop="cardNo"
                :label="$t('m.cashAccount')"
                min-width="100"
              >
              </el-table-column> -->
              <el-table-column
                :label="$t('m.Finance_Withdrawal_date')"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.createTime | dateformat }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="state"
                :label="$t('m.withdrawStatus')"
                min-width="120"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.state | stateFormat(withdrawState) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.Order_Review_Date')"
                min-width="120"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.auditTime | dateformat }}</div>
                </template>
              </el-table-column>
              <emptydata
                slot="empty"
                v-if="!withdrawPage.records || withdrawPage.records.length == 0"
              />
            </el-table>
            <el-pagination
              background
              :page-sizes="[10, 20, 30, 40, 50]"
              :page-size="withdrawPage.size"
              :current-page.sync="withdrawPage.current"
              layout=" prev, pager, next"
              :pager-count="5"
              :total="withdrawPage.total"
              style="margin-right:-5px;"
              class="el_pagination"
              @current-change="changePageNumw"
              v-show="withdrawPage.total > 0"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 锁定、解锁、一键全弹、刷新 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="operateDialog"
      :title="dialogType | stateFormat(optionsTitle)"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ dialogType | stateFormat(optionsText) }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="operateDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="changeStation" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 重新邀请 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="inviteDialog"
      :title="$t('m.Re_invite')"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ $t('m.Re_invite_hint') }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="inviteDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="setUrl" class="cancel_btn confirm_btn">{{
          $t('m.Generate_invitation_link')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      stateOption1: [
        {
          value: 0,
          label: this.$t('m.agency_activated'),
          color: 'background: #fff7e7;'
        },
        {
          value: 1,
          label: this.$t('m.Normal_cooperation'),
          color: 'background: #e6fbee;'
        },
        {
          value: 2,
          label: this.$t('m.Terminate'),
          color: 'background: #ffe8e8;'
        },
        {
          value: 3,
          label: this.$t('m.BrandState1'),
          color: 'background: #fff7e7;'
        }
      ],
      stateOption2: [
        {
          value: 0,
          color: 'background: #FFC855;'
        },
        {
          value: 1,
          color: 'background: #4CE48A;'
        },
        {
          value: 2,
          color: 'background: #FF605A;'
        },
        {
          value: 3,
          color: 'background: #FFC855;'
        }
      ],
      options2: [
        {
          value: 1,
          label: this.$t('m.Advertising_screen')
        },
        {
          value: 0,
          label: this.$t('m.Without_screen')
        }
      ],
      details: {
        branchProfile: {
          de: '',
          en: '',
          fr: '',
          vi: '',
          vi: '',
          zh: ''
        },
        images: [],
        deposit: {
          depositAmount: 0
        },
        branchAccount: {}
      },
      map: '',
      params: {
        branchId: '' //	租借网点id
      },
      // 订单分页参数
      orderPage: {
        // 当前页
        current: 1,
        // 每页数
        size: 5,
        // 总数
        total: 0,
        // 数据
        records: []
      },
      // 提现分页参数
      withdrawPage: {
        // 当前页
        current: 1,
        // 每页数
        size: 5,
        // 总数
        total: 0,
        // 数据
        records: []
      },
      // 分成分页参数
      recordPage: {
        // 当前页
        current: 1,
        // 每页数
        size: 5,
        // 总数
        total: 0,
        // 数据
        records: []
      },
      // 机柜分页参数
      stationPage: {
        // 当前页
        current: 1,
        // 每页数
        size: 5,
        // 总数
        total: 0,
        // 数据
        records: []
      },
      //支付状态
      payOption: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 0,
          label: this.$t('m.Order_Status_Unpaid')
        },
        {
          value: 1,
          label: this.$t('m.Payment_Status_Paid')
        },
        {
          value: 2,
          label: this.$t('m.Order_freeCharge')
        },
        {
          value: 3,
          label: this.$t('m.Payment_Status_Partialrefund')
        },
        {
          value: 4,
          label: this.$t('m.Order_Status_Refunded')
        }
      ],
      //订单状态
      statesOption: [
        {
          value: '99',
          label: this.$t('m.all')
        },
        {
          value: '1',
          label: this.$t('m.Order_Status_Renting')
        },
        {
          value: '2',
          label: this.$t('m.Order_Status_Unpaid')
        },
        {
          value: '3',
          label: this.$t('m.Order_Status_Completed')
        },
        {
          value: '5',
          label: this.$t('m.Order_Status_Surveying')
        },
        // {
        //   value: 6,
        //   label: this.$t('m.Order_Status_Refunded')
        // },
        {
          value: 8,
          label: ''
        }
      ],
      //提现状态
      withdrawState: [
        {
          value: 0,
          label: this.$t('m.Pending_review')
        },
        {
          value: 1,
          label: this.$t('m.branch_Pass')
        },
        {
          value: 2,
          label: this.$t('m.branch_Reject')
        }
      ],
      //机柜状态
      stationState: [
        {
          value: 0,
          label: this.$t('m.Station_Status_Off')
        },
        {
          value: 1,
          label: this.$t('m.Station_Status_On')
        },
        // {
        //   value: 2,
        //   label: '已迁移'
        // },
        {
          value: 3,
          label: this.$t('m.agency_activated')
        }
      ],
      optionsTitle: [
        {
          value: 1,
          label: this.$t('m.Station_LockStatus_Lock')
        },
        {
          value: 2,
          label: this.$t('m.Station_List_Unlock')
        },
        {
          value: 3,
          label: this.$t('m.Station_Ejectall')
        },
        {
          value: 4,
          label: this.$t('m.Station_refreshBattery')
        },
        {
          value: 5,
          label: this.$t('m.delete')
        }
      ],
      optionsText: [
        {
          value: 1,
          label: this.$t('m.Station_switch')
        },
        {
          value: 2,
          label: this.$t('m.Station_unlock')
        },
        {
          value: 3,
          label: this.$t('m.Station_dispose')
        },
        {
          value: 4,
          label: this.$t('m.Station_Confirm_to')
        },
        {
          value: 5,
          label: this.$t('m.Station_List_Confirm_Delete')
        }
      ],
      operateDialog: false, //锁定、解锁、一键全弹、刷新、删除弹窗
      dialogType: '',
      cabinetNo: '', //机柜编号
      times: '',
      timesOptions: [
        {
          value: 0,
          label: this.$t('m.Week_Sun')
        },
        {
          value: 1,
          label: this.$t('m.Week_Mon')
        },
        {
          value: 2,
          label: this.$t('m.Week_Tue')
        },
        {
          value: 3,
          label: this.$t('m.Week_Wed')
        },
        {
          value: 4,
          label: this.$t('m.Week_Thu')
        },
        {
          value: 5,
          label: this.$t('m.Week_Fri')
        },
        {
          value: 6,
          label: this.$t('m.Week_Sat')
        }
      ],
      optionsTab: [
        { checked: true, value: '1', label: this.$t('m.Orders') },
        { checked: false, value: '2', label: this.$t('m.Station_stations') },
        { checked: false, value: '3', label: this.$t('m.Profit_record') },
        { checked: false, value: '4', label: this.$t('m.Withdrawal_record') }
      ],
      activeName: '1',
      inviteDialog: false,
      urlData: '',
      permissionsIds: [],
      userType: this.getUserType() //用户类型
    }
  },
  computed: {
    // penaltyAmounts () {
    //   let penaltyAmount
    //   if (this.details.billingDTO.maxDurationControlType == 2) {
    //     if (this.details.billingDTO.controlType == 1) {
    //       penaltyAmount =
    //         (this.details.billingDTO.amount /
    //           (this.details.billingDTO.cycle / 60)) *
    //         this.details.billingDTO.maxRentDuration
    //     } else if (this.details.billingDTO.controlType == 2) {
    //       penaltyAmount =
    //         (this.details.billingDTO.amount / this.details.billingDTO.cycle) *
    //         this.details.billingDTO.maxRentDuration
    //     } else {
    //       penaltyAmount =
    //         (this.details.billingDTO.amount /
    //           (this.details.billingDTO.cycle * 24)) *
    //         this.details.billingDTO.maxRentDuration
    //     }
    //     return penaltyAmount
    //   } else {
    //     if (this.details.billingDTO.controlType == 1) {
    //       penaltyAmount =
    //         (this.details.billingDTO.amount /
    //           (this.details.billingDTO.cycle / 60 / 24)) *
    //         this.details.billingDTO.maxRentDuration
    //     } else if (this.details.billingDTO.controlType == 2) {
    //       penaltyAmount =
    //         (this.details.billingDTO.amount /
    //           (this.details.billingDTO.cycle / 24)) *
    //         this.details.billingDTO.maxRentDuration
    //     } else {
    //       penaltyAmount =
    //         (this.details.billingDTO.amount / this.details.billingDTO.cycle) *
    //         this.details.billingDTO.maxRentDuration
    //     }
    //     return penaltyAmount
    //   }
    // }
  },
  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (!this.permissionsLists(22)) {
      return
    }
    this.params.branchId = this.$route.query.id
    this.getDetails()
    this.getOrderLists()
  },
  mounted () {},
  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },
    // 切换tab
    switchTab () {
      if (this.activeName == '1') {
        this.getOrderLists()
      } else if (this.activeName == '2') {
        this.getStationLists()
      } else if (this.activeName == '3') {
        this.getBrokeragesLists()
      } else if (this.activeName == '4') {
        this.getWithdrawLists()
      }
    },
    //获取商铺详情
    getDetails () {
      this.$api.shop.shopDetail(this.params.branchId).then(res => {
        if (this.$ok(res)) {
          this.details = res.data
          res.data.images
            ? (this.details.images = this.details.images.split(','))
            : ''
          // console.log(this.details.images,res.data.images )
          this.times = JSON.parse(res.data.openTime).businessHours
          // console.log(this.times);
        }
      })
    },
    //生成绑定账号邀请链接
    setUrl () {
      this.$api.shop.setUrl(this.params.branchId).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.getDetails()
          this.inviteDialog = false
        }
      })
    },

    //获取订单列表
    getOrderLists () {
      this.$api.order.getOrderList(this.params, this.orderPage).then(res => {
        if (this.$ok(res)) {
          this.orderPage = res.data
        }
      })
    },
    // 当前页
    changePageNumo (val) {
      this.orderPage.current = val
      this.getOrderLists()
    },
    //订单详情
    detailClick (orderNo) {
      // console.log(row)
      this.$router.push({ path: '/order/detail', query: { orderNo: orderNo } })
    },
    //获取分成列表
    getBrokeragesLists () {
      let params = {
        target: 4,
        branchId: this.$route.query.id
      }
      this.$api.finance.getBrokeragesList(params, this.recordPage).then(res => {
        if (this.$ok(res)) {
          this.recordPage = res.data
        }
      })
    },
    // 当前页
    changePageNumr (val) {
      this.recordPage.current = val
      this.getBrokeragesLists()
    },
    //获取提现列表
    getWithdrawLists () {
      let params = {
        branchId: this.$route.query.id,
        type: 4
      }
      this.$api.finance.getWithdrawList(params, this.withdrawPage).then(res => {
        if (this.$ok(res)) {
          this.withdrawPage = res.data
        }
      })
    },
    // 当前页
    changePageNumw (val) {
      this.withdrawPage.current = val
      this.getWithdrawLists()
    },
    //获取机柜列表
    getStationLists () {
      this.$api.equipment
        .getStationList(this.params, this.stationPage)
        .then(res => {
          if (this.$ok(res)) {
            this.stationPage = res.data
          }
        })
    },
    // 当前页
    changePageNums (val) {
      this.stationPage.current = val
      this.getStationLists()
    },
    //锁定、解锁、一键全弹、刷新
    dialogClick (e, item) {
      this.dialogType = e
      this.cabinetNo = item
      this.operateDialog = true
    },
    //操作按钮
    changeStation () {
      this.$openLoading()
      if (this.dialogType == 4) {
        this.stationRefresh()
      } else if (this.dialogType == 3) {
        this.stationEjectAll()
      } else {
        this.stationLock()
      }
    },
    //操作按钮结果
    getRes (res) {
      if (this.$ok(res)) {
        this.$message.success(res.message)
        this.getStationLists()
        this.operateDialog = false
        this.$closeLoading()
      } else {
        this.$message.error(res.message)
        this.$closeLoading()
      }
    },
    //刷新电量
    stationRefresh () {
      this.$api.equipment.stationRefresh(this.cabinetNo).then(res => {
        this.getRes(res)
      })
    },
    //一键全弹
    stationEjectAll () {
      this.$api.equipment.stationEjectAll(this.cabinetNo).then(res => {
        this.getRes(res)
      })
    },
    //锁定/解锁
    stationLock () {
      let params = {
        cabinetNo: this.cabinetNo,
        customizeState: this.dialogType == 1 ? 2 : 1
      }
      this.$api.equipment.stationLock(params).then(res => {
        this.getRes(res)
      })
    },
    //机柜详情
    stationClick (cabinetNo) {
      this.$router.push({
        path: '/device/stations/detail',
        query: { cabinetNo: cabinetNo }
      })
    }
  }
}
</script>
